<%-- 
    Document   : index
    Created on : 14.12.2013, 15:01:36
    Author     : emm
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/main.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="icon" href="img/logotypeForTitle.png" type="image/x-icon" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/myscript.js"></script>
        <title> | Social Library</title>
    </head>
    <body>
        <div class="over">
            <div class="inner">123</div>
        </div>
        <div class="registrationBlock"> 
            <div class="registrationForm">
                <div class="allFields">
                    <div class="field">
                        <label for="login">USERNAME</label>
                        <input type="text" id="login" name="login" value="" />
                    </div>
                    <div class="field">
                        <label for="firstName">FIRST NAME</label>
                        <input type="text" id="firstName" name="firstName" value="" />
                    </div>
                    <div class="field">
                        <label for="lastName">LAST NAME</label>
                        <input type="text" id="lastName" name="lastName" value="" />
                    </div>
                    <div class="field">
                        <label for="eMail">E-MAIL</label>
                        <input type="text" id="eMail" name="eMail" value="" />
                    </div>
                    <div class="field">
                        <label for="password">PASSWORD</label>
                        <input type="password" id="password" name="password" value="" />
                    </div>
                    <div class="field">
                        <label for="confirmPassword">CONFIRM PASSWORD</label>
                        <input type="password" id="confirmPassword" name="confirmPassword" value="" />
                    </div>
                </div>
                <div class="registrationCompleteButton">
                    <a href="#"><img id="toCompleteRegistrationButton"src="img/signIn.png"/></a>
                    <a href="#"><img id="CancelRegistration"src="img/Cancel.png"/></a>
                </div>
            </div>
        </div>

        <div class="addBooksBlock" > 
            <div class="addBooksForm">
                <div class="allFields">
                    <div class="field">
                        <label for="ISBN">ISBN</label>
                        <input type="text" id="ISBN" name="ISBN" value="" />
                    </div>
                    <div class="field">
                        <label for="Genre">Genre</label>
                        <input type="text" id="Genre" name="Genre" value="" />
                    </div>
                    <!--end temporary -->
                    <div class="field">
                        <label for="Title">Title</label>
                        <input type="text" id="Title" name="Title" value="" />
                    </div>
                    <div class="field">
                        <label for="Description">Description</label>
                        <input type="text" id="Description" name="Description" value="" />
                    </div>
                    <div class="field">
                        <label for="NumberOfPages">Number Of Pages</label>
                        <input type="text" id="NumberOfPages" name="NumberOfPages" value="" />
                    </div>
                    <!--end temporary -->
                </div>
                <div class="addBooksCompleteButtons">
                    <a href="#"><img id="AddBook"src="img/signIn.png"/></a>
                    <a href="#"><img id="CancelBook"src="img/Cancel.png"/></a>
                </div>
            </div>
        </div>

        <div class="main">
            <!-- header-->
            <div class="header">

                <div class="logotype">
                    <img src="img/logo.png"/>
                </div>

                <div class="search">
                    <input type="text" name="search" value="" placeholder="SEARCH" id="search"/>
                    <label for="search"> 
                        <img class="imgSearchButton" src="img/searchButton.png"/>
                    </label> 
                </div>

                <div class="clear"></div>
                <div class="greenLeaf">
                    <img class="leaf" src="img/leaf.png"/>
                </div>

            </div>

            <!-- Top Banner-->
            <div class="topMenu">
                <ul>
                    <li class="navigation"><a href="#">PROFILE</a>
                        <ul class="paddingList">
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>                            
                            <li><a href="#">123</a></li>
                        </ul>
                    </li>
                    <li class="navigation"><a href="#">DASHBOARD</a>
                        <ul class="paddingList">
                            <li><a href="#" id="addBookButtonMain">ADD BOOK</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>                            
                            <li><a href="#">123</a></li>
                        </ul>
                    </li>
                    <li class="navigation"><a href="#">OTHER USERS</a>
                        <ul class="paddingList">
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>                            
                            <li><a href="#">123</a></li>
                        </ul>
                    </li>
                    <li class="navigation"><a href="#">ADD BOOK</a>
                        <ul class="paddingList">
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>                            
                            <li><a href="#">123</a></li>
                        </ul>
                    </li>
                    <li class="navigation" id="registrationButton"><a href="#">REGISTRATION</a>
                        <ul class="paddingList">
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>
                            <li><a href="#">123</a></li>                            
                            <li><a href="#">123</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="clear"></div>
            </div>

            <!--main part-->
            <div class="mainPart"> 
                <div class="left">

                    <div class="signIn">
                        <div class="social">
                            <label for="username">USERNAME </label>
                            <input type="text" id="username" name="userName" value="" />
                        </div>
                        <div class="social">
                            <label for="pass">PASSWORD </label>
                            <input type="password" id="pass" name="userName" value="" />
                        </div>

                        <div class="social">
                            <a href="#" class="socialLogoFirst"><img id="fb" class="socialLogo" src="img/fb.png"/></a>
                            <a href="#"><img  class="socialLogo" id="tw" src="img/tw.png"/></a>
                            <a href="https://oauth.vk.com/authorize?client_id=4039026&redirect_uri=http://localhost:8081/SocialLibrary-web/Vk&response_type=code"><img  class="socialLogo" id="vk" src="img/vk.png"/></a>
                            <a href="#"><img  class="socialLogo" id="gPlus"src="img/gPlus.png"/></a>
                        </div>

                        <div class="signInButton">
                            <a href="#"><img src="img/signIn.png"/></a>
                        </div>
                        <div class="clear"></div>
                    </div>

                    <div class="filtersOne">
                        <ul>
                            <li><a href="#">NEW COMERS</a></li>
                            <li><a href="#">POPULAR</a></li>
                            <li><a href="#">GENRES</a></li>
                            <li><a href="#">ALL BOOKS</a></li>
                        </ul>

                        <div class="clear"></div>
                    </div>

                    <div class="subscription">
                        <div>
                            <label for="username">E-MAIL SUBSCRIPTION </label>
                            <input type="text" id="subscript" name="notification" value="" />
                        </div>
                        <div>
                            <img class="signUpButton" src="img/signUp.png"/>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>

                <div class="right">
                    <div class="typeOfViewAndLibrary">
                        <div class="librarySwitch">
                            <ul>
                                <li><a href="#">LOCAL LIBRARY</a></li>
                                <li><a href="#">GLOBAL LIBRARY</a></li>
                            </ul>
                        </div>
                        <div class="viewSwitch">
                            <a href="#"><img  class="viewSwitchFirstImg" id="gridButton" src="img/viewGrid.png"/></a>
                            <a href="#"><img  class="viewSwitchImg" id="smallListButton" src="img/viewSmallLines.png"/></a>
                            <a href="#"><img  class="viewSwitchImg" id="bigListButton" src="img/viewBigLines.png"/></a>
                        </div>
                        <div class="clear"></div>
                    </div>                   
                    <div class="grid" id="content">
                        <div id="contentWrapper">
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png"/></div>
                                    <div class="rating">Rating Start</div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                                <div class="userActionsWithBooks"></div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>
                            <div class="bookDisplay"> 
                                <div class="leftBookDisplay">                        
                                    <div class="image"><img src="img/bookimage.png" /></div>
                                    <div class="rating"><h4>Rating Start</h4></div>
                                </div>
                                <div class="rightBookDisplay">                        
                                    <div class="title">Bookkkk</div>
                                    <div class="descp">qweqefwfwefwefwfwefwfwefwefefe</div>
                                    <div class="isbn">ISBN</div>
                                </div>
                            </div>

                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="pagination">
                        <div id="left">
                            <a href="#"><<<</a>
                        </div>
                        <span>1</span>
                        <span>2</span>
                        <span>3</span>
                        <div id="right">
                            <a href="#">>>></a>
                        </div>
                    </div>

                </div>
                <div class="clear"></div>
            </div>

            <div class="footer"> 
                <div class="footerMenu">
                    <ul>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">SUPPORT</a></li>
                        <li><a href="#">CONTACT US</a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <label> &#169 2013-2014 Social Library Media. All rights reserved. </label>
                <div class="clear"></div>
            </div>

        </div>  
    </body>
</html>
